<template>
    <div>
       <div class="searchHeader">
            <div class="searhicon" v-show="isShow" @click="leftEvent">
                <van-icon name="arrow-left"  size="16px"></van-icon>
            </div>
            <form action="/">
                <van-search 
                    ref="search"
                    :placeholder="placeholder" 
                    v-model="searchVal"
                    show-action
                    @keyup.enter="searchHandle"
                    @search="search"
                    @input="$emit('input', searchVal)"
                    @focus="searchMode = true" >
                    <div slot="action">
                        <span class="van-icon van-icon-wap-home" style="font-size: 20px;    vertical-align: middle;" v-show="searchMode === false" @click="$router.push('/index')"></span>
                        <span v-show="searchMode === true" @click="search">搜索</span>
                    </div>
                </van-search>
            </form>
       </div>

         <transition name="el-zoom-in-bottom">
            <div class="searchList" v-show="searchMode">
                <p class="tips" v-show="history.length > 0">搜索历史</p>
                <van-tag plain size="medium" v-for="item in history" :key="item" @click="searchVal = item; search()">{{item}}</van-tag>
                <van-button @click="clearLocalStorage" v-show="history.length > 0">清除记录</van-button>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'ssarch',
    props: {
        back: { default: true},
        value: {},
        placeholder: { default: '请输入搜索关键词'}
    },
    data() {
        return {
            history: [],
            searchVal: '',
            searchMode: false,
        }
    },

    methods: {
        leftEvent() {
            if (this.searchMode) {
                this.searchMode = false
            } else {
                this.$router.back();
            }
        },
        cancelSearch() {
            if (this.$route.query.type === 'search') { 
                this.$router.back();
                return;
            }
            this.searchMode = false;
        },

        search() {
            this.searchMode = false;
            this.updateLocalStorage(this.searchVal);
            this.$emit('search', this.searchVal);
        },

        updateLocalStorage(val) {
            if (this.history.indexOf(val) !== -1) {
                this.history.splice(1, this.history.indexOf(val));
            }
            this.history.unshift(val);
            localStorage.setItem('historySearch', this.history.toString());
        },

        clearLocalStorage() {
            this.history = [];
            localStorage.removeItem('historySearch');
        }
    },

    mounted() {
        if (this.value) {
            this.searchVal = this.value;
        }

        let history = localStorage.getItem('historySearch');
        if (history && history.split) {
            this.history = history.split(',')
        }
    },

    computed: {
        isShow() {
            if (this.back) {
                return true;
            } else {
                return this.searchMode;
            }
        }
    },
    destroyed() {
        document.querySelector('.bodyContent').style.overflow = 'auto';
    },

    watch: {
        searchMode() {
            if (this.searchMode) {
                document.querySelector('.bodyContent').style.overflow = 'hidden';
            } else {
                document.querySelector('.bodyContent').style.overflow = 'auto';
            }
        }
    }
}
</script>

<style scoped lang="less">
.searchHeader {
    display: flex;
    align-items: center;
    background-color: #fff;
    .searhicon {
        width: 25px;
        text-align: right;
    }
    form {
        flex: 1;
    }
}
.searchList {
    background-color: #fff;
    position: fixed;
    top: 54px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 15px;
    .tips {
        line-height: 3;
        color: #666;
    }

    /deep/ .van-tag {
        margin: 0 5px;
    }


    /deep/ .van-button {
        margin: 20px auto;
        display: block;
        border: none;
        text-decoration: underline;
    }
}
</style>
